<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/asserts/scripts/jQuery-3.6.0.js}"></script>
</head>
<body>
    <div>
        <nav th:replace="~{commons/tag::topBar}"></nav>
    </div>
    <div>
        我的地址 :
        <select id="myaddress">
            <option value="">==请选择地址==</option>
            <option th:each="a : ${alist}" th:value="${a.id}" th:text="${a.detailaddress}"></option>
        </select>
    </div>
    <div>
        <table  width="800px" border="1px">
            <tr>
                <th>
                    <input type="checkbox" id="myflag" onclick="test(this)">
                </th>
                <th>ID</th>
                <th>名称</th>
                <th>图片</th>
                <th>价格</th>
                <th>品牌</th>
                <th>生产日期</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            <tr th:each="c: ${list}">
                <th>
                    <input type="checkbox" name="cartName" onclick="test01()" th:id="|mycart_${c.product.id}|" th:value="${c.product.id}">
                </th>
                <th th:text="${c.product.id}">ID</th>
                <th th:text="${c.product.pname}">名称</th>
                <th>图片</th>
                <th th:id="|price_${c.product.id}|" th:text="${c.product.price}">价格</th>
                <th th:text="${c.product.bname}">品牌</th>
                <th th:text="${#dates.format(c.product.createdate,'yyyy-MM-dd')}">生产日期</th>
                <th th:id="|buycount_${c.product.id}|" th:text="${c.buycount}">
                </th>
                <th>
                    <a href="javascript:void(0)" th:onclick="|del(${c.product.id})|">删除</a>
                </th>
            </tr>
        </table>
    </div>
    <p />
    <div>
        总价格 :<span id="allProce">0</span>元
    </div>
    <p>
        <button onclick="submitOrder()">提 交</button>
    </p>

    <script>
        function submitOrder(){
            var cs = $("input[name=cartName]:checked");
            let aid = $("#myaddress").val();
            if (cs.length > 0 && aid != '') {
                let idArr = [] ;
                cs.each(function (){
                    idArr.push($(this).val());
                });
                console.log(idArr) ;
                let url = "../order/addOrder" ;
                let param = "idArr="+idArr+"&aid="+aid ;
                $.post(url,param,function (data){
                    console.log(data)
                }) ;
            }else {
                alert("请至少选中一个商品,地址必选!");
                return ;
            }
        }


        function test(obj){
            //首先获取所有的 购物车的复选框
           var cs = $("input[name=cartName]");
           cs.each(function(){
               //this.checked = obj.checked ;
               $(this).prop("checked",obj.checked)
           });
            myChecked();
        }

        function test01(){
            var cs = $("input[name=cartName]");
            var f = $("#myflag");

            var b = false ;
            cs.each(function (){
                if (this.checked) {
                    b = true ;
                    //break ;
                }
            });

            if (b) {
                f.prop("checked",true);
            }else {
                f.prop("checked",false);
            }

            myChecked();
        }

        function myChecked(){
            var cs = $("input[name=cartName]:checked");
            var all = 0 ;

            if (cs.length > 0) {
                cs.each(function (){
                    var pid = $(this).val();
                    var price = $("#price_"+pid).text();
                    var bc = $("#buycount_"+pid).text();

                    var p = parseFloat(price) * parseInt(bc) ;
                    all += p ;
                });
            }

            $("#allProce").text(all) ;
        }

        function del(id){

        }
    </script>
</body>
</html>